/*
 * 修改产品品牌信息
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-08-16 17:09:37
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }
</style>
<template>
	<div class="v-admin-product-brand-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="80"
			name="edit-form">

			<Form-item
				:label="$t('brand.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('brand.please_enter_name')"
					name="edit-name"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('brand.logo')"
				prop="logo">
				<iview-uploader
					ref="logo"
					:default-file-list="default_list"
					:on-remove="handleRemove"
					:on-success="handleUploadSuccess"
					:multiple="false"
					accept="image/jpg, image/jpeg, image/png"/>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="updateBrand('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import iviewUploader from 'src/views/component/iview-uploader';

export default {
	name: 'AdminBrandEdit',
	components: {
		'iview-uploader': iviewUploader,
	},
	mixins: [showLocalImage],
	props: {
		brandDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {
			formValidate: {
				name: null,
				logo: null,
			}, // 更新表单数据

			default_list: [], // 解析后图片数据

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand.name') }),
						trigger: 'blur,change',
					},
				],
				logo: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand.logo') }),
						trigger: 'blur,change',
					},
				],
			},

		};
	},

	created() {
		this.initFormData();
	},

	methods: {
		/**
		 * 初始化表单数据
		 * @return {undefined}
		 */
		initFormData() {
			this.formValidate.name = this.brandDetail.name;
			this.formValidate.logo = this.brandDetail.logo;
			const logo_info = this.parseObject(this.brandDetail.logo);
			this.default_list.push(logo_info);
		},

		/**
		 * 解析成 {name:xx, url:xx}
		 * @param {string} url
		 * @return {object}
		 */
		parseObject(url) {
			const name = url.split('/').pop() || '';
			return { name, url };
		},

		/**
		 * 移除图片
		 * @return {undefined}
		 */
		handleRemove() {
			this.formValidate.logo = null;
			this.$refs.formValidate.validateField('logo');
		},

		/**
		 * 选择图片
		 * @param {String} url {图片路径}
		 * @return {undefined}
		 */
		handleUploadSuccess({ url }) {
			this.formValidate.logo = url;
			this.$refs.formValidate.validateField('logo');
		},

		/**
         * 更新品牌信息
		 * @param {String} name {表单ref的值}
         * @return {undefined}
         */
		updateBrand(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					const form = Object.assign(this.formValidate, { _method: 'PUT' });
					this.$emit('update', this.brandDetail.id, form);
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单ref的值}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.logo.clearFiles();

			this.$refs[name].resetFields();
		},

	},
};
</script>
